<template>
    <div class="main">
        <div class="login">
            
            <div class="logo">
                <img src="../assets/icon-valorant.webp" alt="">               
            </div>
        <div class="loginform">
            <div style="text-align: center;"><h2>欢迎进入电商系统</h2></div>           
            <el-form :model="user" label-width="auto" style="max-width: 500px" :rules="userRules" ref="formRef">
            <el-form-item prop="name">
            <el-input v-model="user.name" placeholder="用户名" :prefix-icon="User"/>
            </el-form-item>
            <el-form-item prop="pwd">
            <el-input v-model="user.pwd"placeholder="密码" :prefix-icon="Lock" show-password/>
            </el-form-item>
            <el-form-item>
                    <el-button type="primary" @click="submitForm(userFormRef)" style="width: 100px;" >登录</el-button>
                    <el-button  type="success" style="width: 100px;" @click="resetForm(userRef)">重置密码</el-button>         
            </el-form-item>
            </el-form>
        </div>
    
        </div>
    </div>
</template>

<script setup>
import { reactive ,ref,unref} from 'vue'
import {User,Lock} from '@element-plus/icons-vue'
import api from '@/api/index.js' //引入api接口
import { useRouter } from 'vue-router';

const user = reactive({
    name:'',
    pwd:''
})


//定义表单规则
const userRules=reactive({
    name:[        
            {required:true,message:'用户名不能为空',trigger:'blur'},
            {min:3,max:10,message:'长度在3到10个字符之间',trigger:'blur'}     
    ],
    pwd:[
        {required:true,message:'密码不能为空',trigger:'blur'},
        {min:3,max:10,message:'长度在3到10个字符之间',trigger:'blur'}     

    ]
})
//定义表单ref https://segmentfault.com/a/1190000042072492 element-plus 重置表单的js写法
const formRef=ref(null) //ref是Vue.js中的一个函数，用于创建一个可响应的数据对象。它接受一个参数作为初始值，并返回一个响应式的对象。

const resetForm=()=>{
        let form=unref(formRef)
        //unref函数在Vue.js中主要用于解除响应式引用。
        // 它接受一个参数，如果该参数是ref对象，则返回其内部值；如果不是，则直接返回参数本身。
        form.resetFields()
}

const router =useRouter()
const submitForm = () => {
    
    let form=unref(formRef)
  form.validate( (valid) => {
    if (valid) {
      api.login(user).then(res=>{
        //根据状态码的相应结果进行处理
        if(res.data.status==200){            
            ElMessage({
                message: res.data.msg,
                type: 'success',
                plain: true,
        })
        //记录登录的token值
        sessionStorage.setItem('token',res.data.token)
        //实现跳转
            router.push('/home')
        }
        else{
            ElMessage({
                message: res.data.msg,
                type: 'error',
                plain: true,
        })
        }
        
      })
     } else {
      console.log('验证失败')
      return false
     }
   } )
}
</script>


<style scoped>
    .main{
        width: 100%;
    height: 100%;
    background-color: #282830;
    display: flex;
    justify-content: center;
    align-items: center;
    }
    .login{
        width: 450px;
        height: 300px;
        background-color: white;
        display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    }
    .logo{
        margin-top: -300px;
        box-shadow: #282830;
        
    }
    .loginform{
       width: 250px;
       height: 280px;
       margin: 10px;
    }
    img{
        height:28px;
        width :130px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        color: #28344E;
        border-radius: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
</style>